﻿@model Eisk.Models.Employee
<!--*******************************************************************************************************************
*                                                                                                                     *
*                                         Script Area                                                                 *
*                                                                                                                     *
********************************************************************************************************************-->
<script type="text/javascript">
/* Upload Image related functions. */
    function uploadFile() {
        var fd = new FormData();
        fd.append("imageUpload", document.getElementById('imageUpload').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        xhr.open("POST", "@Url.Action("AjaxImageUpload")");
        xhr.responseType = 'blob';
        xhr.send(fd);
        $('#divUploadStatus').show();    
    }

    function uploadProgress(evt) {
        if (evt.lengthComputable) {
            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            ShowProgress (percentComplete, 100);
        }
        else {
            document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
    }

    function ShowProgress(currentValue, maxValue)
    {
        document.getElementById('progressNumber').innerHTML = currentValue.toString() + '% uploaded.';
        var progressBar = document.getElementById("progressBar");  
        progressBar.max = maxValue; 
        progressBar.value = currentValue;  
    }

    function uploadComplete(evt) {
        /* This event is raised when the server send back a response */
        if (this.status == 200) {
            ShowProgress(100,100);
            document.getElementById('imageUpload').value = '';
            //loading the respose bytes to image tag
            var blob = this.response;
            var img = document.getElementById('employeeImage');
            img.onload = function(e) {
                window.URL.revokeObjectURL(img.src); // Clean up after yourself.
            };
            img.src = window.URL.createObjectURL(blob);
            $('#divUploadPanel').hide(); 
            $('#btnCancelUpload').show();    
            //document.body.appendChild(img);
        }
    }

    function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
    }

    function uploadCanceled(evt) {
        alert("The upload has been canceled by the user or the browser dropped the connection.");
    }
</script>
<script type="text/javascript">
    /* Discard Uploaded Image related functions. */

    $("#btnCancelUpload").live("click", function (e) {
        // Don't post back
        //e.preventDefault();
        $('#divUploadPanel').show();    
        $('#btnCancelUpload').hide();    
        $('#divUploadStatus').hide();       
        ReLoadEmployeeDbImage();
    });

    function ReLoadEmployeeDbImage() 
    {   
        var xhr = new XMLHttpRequest();
        xhr.addEventListener("load", DownloadEmployeeDbImageComplete, false);
        xhr.open("GET", "@Url.Action("DiscardUploadededImage", new { id = Model.Id })");
        xhr.responseType = 'blob';
        xhr.send();

        $('#ajax-loader').show();
    }

    function DownloadEmployeeDbImageComplete(evt) {
        if (this.status == 200) {
            var blob = this.response;
            var img = document.getElementById('employeeImage');
            img.onload = function(e) {
                window.URL.revokeObjectURL(img.src); // Clean up after yourself.
            };
            img.src = window.URL.createObjectURL(blob);
            
        }

        $('#ajax-loader').hide();
    }

</script>
<!-- Picture Area -->
@Html.LabelFor(model => model.Photo): @Html.RequiredSymbolFor(model => model.Photo)<br
    class="clear" />
<a href="@Url.Action("EmployeeImageFile", new { id = Model.Id })" target="_blank">
    <img id="employeeImage" alt="employee image" class="profile-image" src="@Url.Action("EmployeeImageFile", new { id = (Model.Id) })" /><br />
</a>
<label>
    Upload New Image:</label><br />
<div id="divUploadPanel">
    <input type="file" id="imageUpload" name="imageUpload" onchange="uploadFile();" /><br />
    @if (Model.Id != 0 && Model.Photo != null)
    {<input type="checkbox" id="removeImage" name="removeImage" /><text>Remove Image</text>}
</div>
<div id="divUploadStatus" style="display: none">
    <progress id="progressBar">
    </progress>
    <span id="progressNumber" />
</div>
<a href="#" id="btnCancelUpload" style="display: none">Discard upload</a>
<img id="ajax-loader" src="../../Images/loader-life.gif" style="display: none" />
<br class="clear" />
<!-- Picture Area Ends -->
